<template>
<div style="padding: 15px">
  <Button type="success" style="margin-bottom:20px" @click="ClickAdd">新增</Button>
  <template>
    <Table border :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="ClickDetail(row)">详情</Button>
        <Button type="error" size="small">删除</Button>
      </template>
    </Table>
  </template>
  <Modal
    width="1000"
    v-model="scene.modal"
    title="详情">
    <div class="divtitleClass">
      人员
    </div>
    <vxe-table
      align="center"
      :data="scene.lList">
      <vxe-table-column title="图标">
        <template v-slot="{ row }">
          <img width="15px" :src="row.img_url" alt="">
        </template>
      </vxe-table-column>
      <vxe-table-column field="first_level_name" title="一级标签"></vxe-table-column>
      <vxe-table-column field="second_level_name" title="二级标签"></vxe-table-column>
    </vxe-table>
    <div class="divtitleClass">
      资源
    </div>
    <vxe-table
      align="center"
      :data="scene.pList">
      <vxe-table-column title="图标">
        <template v-slot="{ row }">
          <img width="15px" :src="row.img_url" alt="">
        </template>
      </vxe-table-column>
      <vxe-table-column field="first_level_name" title="一级标签"></vxe-table-column>
      <vxe-table-column field="second_level_name" title="二级标签"></vxe-table-column>
    </vxe-table>
  </Modal>
  <Modal
    width="1000"
    v-model="add.modal"
    @on-ok="addScene"
    title="详情">
    <div class="divtitleClass">
      模板信息
    </div>
    <div class="divclass">
      <div style="margin-bottom: 10px">
        <Input v-model="add.info.name" placeholder="请输入模板名称" style="width: 300px" />
      </div>
      <div>
        <Input v-model="add.info.remarks" placeholder="请输入模板备注" style="width: 300px" />
      </div>
    </div>
    <Row>
      <Col span="11">
        <div class="divtitleClass">
          人员
        </div>
        <div class="divclass">
          <template>
            <Tree ref="labelTree" :data="add.labelList" show-checkbox></Tree>
          </template>
        </div>
      </Col>
      <Col span="2"></Col>
      <Col span="11">
        <div class="divtitleClass">
          资源
        </div>
        <div class="divclass">
          <template>
            <Tree ref="placeTree" :data="add.placeList" show-checkbox></Tree>
          </template>
        </div>
      </Col>
    </Row>
  </Modal>
</div>
</template>

<script>
import {
  findGridSceneDetailList,
  findGridSceneTemplateList,
  findResourceMapPlaceList,
  saveGridScene
} from '../../../api/gridScene'
import { findFocuGroupList, findFocusGroupLabelList } from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      columns: [
        {
          title: '模板ID',
          key: 'id'
        },
        {
          title: '模板名称',
          key: 'name'
        },
        {
          title: '备注',
          key: 'remarks'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      dataList: [],
      scene: {
        modal: false,
        pList: [],
        lList: []
      },
      add: {
        modal: false,
        info: {},
        labelList: [],
        placeList: []
      }
    }
  },
  methods: {
    init () {
      findGridSceneTemplateList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    ClickDetail (e) {
      this.getDetail(e, 'label')
      this.getDetail(e, 'place')
      this.scene.modal = true
    },
    getDetail (e1, e2) {
      let data = {
        template_id: e1.id,
        type: e2
      }
      findGridSceneDetailList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e2 === 'label') {
            this.scene.lList = ret.data.data
          }
          if (e2 === 'place') {
            this.scene.pList = ret.data.data
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findFocusGroupLabelList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findFocusGroupLabelList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '1') {
            this.firstLableList = ret.data.data
          } else if (e1 === '2') {
            this.secondLableList = ret.data.data
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    ClickAdd () {
      this.add.modal = true
      this.findFocuGroupList()
      this.findResourceMapPlaceList()
    },
    findFocuGroupList () {
      findFocuGroupList().then(ret => {
        if (ret.data.errcode === 0) {
          this.add.labelList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findResourceMapPlaceList () {
      let data = {
        label_name: 'title',
        children_name: 'children'
      }
      findResourceMapPlaceList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.add.placeList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    addScene () {
      this.add.info.lList = this.$refs.labelTree.getCheckedNodes()
      this.add.info.pList = this.$refs.placeTree.getCheckedNodes()
      console.log(this.add.info)
      let data = {
        name: this.add.info.name,
        remarks: this.add.info.remarks,
        lList: this.add.info.lList,
        pList: this.add.info.pList
      }
      saveGridScene(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.selectCss{
  display: flex;
  margin-bottom: 10px;
}
.divclass{
  margin-bottom: 10px;
}
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
.topclass{
  margin-right: 5px;
}
</style>
